<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>膳食查询</title>
		<style>
			table.data {
				border-collapse: collapse;
				width: 100%;
				border: 1px solid #dddddd;
			}
			
			table.data>thead>tr {
				background: #5CB85C;
			}
			
			table.data>tbody>tr:nth-child(even) {
				background: #efefef;
			}
			
			table.data td,
			table.data th {
				padding: 5px;
				text-align: center;
				border: 1px solid #dddddd;
			}
			
			table.data tr:hover {
				background: #5Cee5C;
			}
			
			.pagination-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 1em;
			}
		</style>
		<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
	</head>

	<body>
		<article>
			<div class="row-fluid">
				<div class="span12">
					<ul class="breadcrumb">
						<li>
							<a href="#">主页</a> <span class="divider">/</span>
						</li>
						<li>
							<a href="selectbykey.html">膳食管理</a> <span class="divider">/</span>
						</li>
						<li class="active">
							<a href="clearview.html">膳食编辑</a>
						</li>
					</ul>
				</div>
			</div>
			<menu style="text-align: center;">
				<input v-model="key" type="text" placeholder="请输入查询条件">
				<button @click="gotoPage" class="primary">查询</button>
				<a class="btn btn-info" type="button" href="add.html">添加</a>
				<div class="span4">

				</div>
			</menu>
			<section class="grow">
				<table class="data">
					<thead>
						<tr>
							<th>序号</th>
							<th>护工</th>
							<th>老人</th>
							<th>日期</th>
							<th>餐点</th>
							<th>美食</th>
							<th>图片</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="rowsEL" v-if="result!=null">
						<tr v-for="(row,i) in result.rows">
							<td>{{i+1}}</td>
							<td>{{row.aideName}}</td>
							<td>{{row.elderName}}</td>
							<td>{{row.mealDate}}</td>
							<td>{{row.mealTime}}</td>
							<td>{{row.foods}}</td>
							<td>{{row.foodImage}}</td>
							<td><button :value="row.id" @click="toclearview($event)" class="btn btn-group-lg">查看</button></td>
						</tr>
					</tbody>
				</table>
			</section>
			<div class="container-fluid">
				<div class="row-fluid">
					<div class="span4">
						<div>
							<span>共<b>{{result.totalRows}}</b>条记录</span>
							<span>每页<b>{{result.pageSize}}</b>条</span>
							<span>共<b>{{result.totalPages}}</b>页</span>
						</div>
					</div>
					<div class="span4">
						<div id="pagination-links-box">
								<a href="javascript:" @click="query(1)">首页</a>
								<a href="javascript:" @click="query(result.pageNo-1)">上一页</a> <b id="pageNoEL">{{result.pageNo}}</b>
								<a href="javascript:" @click="query(result.pageNo+1)">下一页</a>
								<a href="javascript:" @click="query(result.totalPages)">末页</a>
							</div>
					</div>
				</div>
			</div>
		</article>
		<script src="http://code.jquery.com/jquery.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="../../common/axios.min.js"></script>
		<script src="../../common/vue.js"></script>
		<script>
			const app = new Vue({
				el: "body>article",
				data: {
					key:null,
					result:{}

				},
				//				watch: {
				//					"result.pageSize": function(newV, oldV) {
				//this.gotoPage(this.result.pageNo,newV);
				//					}
				//				},
				methods: {
					gotoPage: function() {
						axios.get("/elderfood", {
								params: {
									key: this.key,
								}
							})
							.then(function(resp) {
								if(resp.code === "ok") {
									app.result = resp.data;
								} else {
									console.log(resp.message)
								}
							});
					},
					toclearview: function(evt) {
						let id = evt.target.value;
						sessionStorage.setItem("id", id);
						window.location = "clearview.html";
					}
				}
			});
		</script>

	</body>

</html>